<template>
  <div  style="overflow:auto">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
      <li v-for="i in this.figuresList" class="list-item" :key="i">{{ i }}</li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 10,
        loading: false,
        figuresList: [],
      }
    },
    created() {
      const a={
      id: "230000198906215278",
      img: "dwxkjobh.png",
      name: "潘妮的宝盒盲盒桉涂自然秘境 学院怪谈娃娃手办BJD可动人偶小画家",
      price: 75,
      toil: 10.3,
      nume: 4
    }
    this.figuresList.push(a)
  },
    computed: {
      noMore () {
        return this.figuresList.length >= 20
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
    methods: {
      load () {
        this.loading = true
        setTimeout(() => {
          const a={
      id: "230000198906215278",
      img: "dwxkjobh.png",
      name: "潘妮的宝盒盲盒桉涂自然秘境 学院怪谈娃娃手办BJD可动人偶小画家",
      price: 75,
      toil: 10.3,
      nume: 4
    }
    this.figuresList.push(a)
          this.count += 1
          this.loading = false
        }, 2000)
      }
    }
  }
</script>
<style lang="less" scoped>
div{
    width: 1130px;
    height: 100px;
    margin-top: 40px;
    margin-left: 20px;
    background-color: aqua !important;
  }

</style>